<template>
	<view class="content">

		<view class="content-left">
			<button class="button" open-type="share"></button>
			<u-icon name="zhuanfa" size="55"></u-icon>
			<text style="font-size: 20rpx;margin-top: 5rpx;">分享</text>
		</view>
        <view class="content-left" @click="collect" >
			<view v-if="!isCollect">
			<u-icon name="star" size="55" ></u-icon>
			</view>
			<view v-else >
			<u-icon name="star-fill" size="55" color="#ffc003" ></u-icon>
			</view>
			<text style="font-size: 20rpx;margin-top: 5rpx;">收藏</text>
		</view>
		<view class="content-right">
			<view class="content-right-button content-right-online">
				<view>在线问</view>
				<button class="button" open-type="contact"></button>
			</view>
			<view class="content-right-button content-right-call" @click="callUp()">打电话</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			telPhoneNumber:{
				type:Number,
			    default:18664470888
			},
			isCollectProps:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
                isCollect:false
			}
		},
		created() {
			console.log(this.isCollectProps)
			this.isCollect = this.isCollectProps
		},
		methods: {
			callUp(){
				uni.makePhoneCall({
				    phoneNumber: this.telPhoneNumber.toString() //仅为示例
				});
			},
			collect(){
				this.isCollect =  !this.isCollect
				
				this.$emit('collection',this.isCollect)
			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		width: 100%;
		position: fixed;
		z-index: 3;
		bottom: 0;
		background: white;
		padding: 20rpx;
		border-top: 1rpx solid #f0f0f0;
		display: flex;
		height: 150rpx;
.button {
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 999;
				opacity: 0;
			}
		.content-left {
			height: 100%;
			margin-right: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
            width: 50rpx;
			
		}

		.content-right {
			flex: 1;
			display: flex;
			justify-content: space-between;

			.content-right-online {
				color: #00aeff;
				position: relative;
			}

			.content-right-call {
				background-color: #00aeff;
				color: white;
			}

			.content-right-button {
				// height: 100%;
				height: 80rpx;
				width: 250rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1rpx solid #00aeff;
			}
		}
	}
</style>
